import {Image, InfiniteScroll, List, PullToRefresh} from 'antd-mobile'
import {useArticleList} from "@/hooks/useArticleList";
import {useNavigate} from "react-router-dom"

type Props = {
    channelId: string
}

const HomeList = (props: Props) => {
    const {channelId} = props;
    // 列表数据
    const {articleList, loadMore, hasMore, onRefresh} = useArticleList(channelId);

    // 路由跳转
    const navigate = useNavigate();
    const goToDetail = (id: string) => {
        navigate(`/detail?id=${id}`)
    }

    return (
        <>
            {/* 下拉刷新 */}
            <PullToRefresh onRefresh={onRefresh}>
                <List>
                    {articleList.results.map((item) => (
                        <List.Item
                            onClick={() => goToDetail(item.art_id)}
                            key={item.art_id}
                            prefix={
                                <Image
                                    src={item.cover.images?.[0]}
                                    style={{borderRadius: 20}}
                                    fit="cover"
                                    width={40}
                                    height={40}
                                />
                            }
                            description={item.pubdate}
                        >
                            {item.title}
                        </List.Item>
                    ))}
                </List>
            </PullToRefresh>

            {/*  无限滚动  */}
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={10}/>

        </>
    )
}

export default HomeList